<template>
  <el-card class="content">
    <el-row>
      <el-col :span="6">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="dialogVisible = true"
          size="small"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <p class="bg-purple">坐标参数信息列表</p>
    <el-table :data="tableData" stripe size="small">
      <el-table-column
        prop="tailingPondName"
        label="尾矿库名称"
        align="center"
      ></el-table-column>
      <el-table-column prop="dataType" label="数据类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.dataType === 0">RTK数据</span>
          <span v-if="scope.row.dataType === 1">静态数据</span>
        </template></el-table-column
      >
      <el-table-column
        prop="offsetX"
        label="X坐标平移量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="offsetY"
        label="Y坐标平移量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="offsetZ"
        label="Z坐标平移量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="rotateX"
        label="X轴旋转角"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="rotateY"
        label="Y轴旋转角"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="rotateZ"
        label="Z轴旋转角"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="scale"
        label="比例因子"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="midLongitude"
        label="中央子午线经度"
        align="center"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="(isdialogVisible = true), handleEdit(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="delet(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <el-dialog
      title="增加坐标参数"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeDialogVisible"
    >
      <el-form ref="form" :model="form" label-width="130px" :rules="rules">
        <el-form-item label="尾矿库" prop="tailingPondId">
          <el-select
            placeholder="请选择尾矿库"
            style="width: 100%"
            v-model="form.tailingPondId"
          >
            <el-option
              v-for="item in opationss"
              :key="item.id"
              :label="item.tailingName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型" prop="dataType">
          <el-select
            placeholder="请选择数据类型"
            v-model="form.dataType"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="X坐标平移量" prop="offsetX">
          <el-input
            v-model="form.offsetX"
            placeholder="请输入X坐标平移量"
          ></el-input>
        </el-form-item>
        <el-form-item label="Y坐标平移量" prop="offsetY">
          <el-input
            v-model="form.offsetY"
            placeholder="请输入Y坐标平移量"
          ></el-input>
        </el-form-item>
        <el-form-item label="Z坐标平移量" prop="offsetZ">
          <el-input
            v-model="form.offsetZ"
            placeholder="请输入Z坐标平移量"
          ></el-input>
        </el-form-item>
        <el-form-item label="X轴旋转角" prop="rotateX">
          <el-input
            v-model="form.rotateX"
            placeholder="请输入X轴旋转角"
          ></el-input>
        </el-form-item>
        <el-form-item label="Y轴旋转角" prop="rotateY">
          <el-input
            v-model="form.rotateY"
            placeholder="请输入Y轴旋转角"
          ></el-input>
        </el-form-item>
        <el-form-item label="Z轴旋转角" prop="rotateZ">
          <el-input
            v-model="form.rotateZ"
            placeholder="请输入Z轴旋转角"
          ></el-input>
        </el-form-item>
        <el-form-item label="比例因子" prop="scale">
          <el-input
            v-model="form.scale"
            placeholder="请输入比例因子"
          ></el-input>
        </el-form-item>
        <el-form-item label="中央子午线经度" prop="midLongitude">
          <el-input
            v-model="form.midLongitude"
            placeholder="请输入中央子午线经度"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        style="display: block; text-align: center; margin-top: -30px"
      >
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button @click="closeDialogVisible()">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改坐标参数"
      :visible.sync="isdialogVisible"
      width="30%"
      :before-close="closeisDialogVisible"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="130px"
        :rules="rulesForm"
      >
        <el-form-item label="尾矿库" prop="tailingPondId">
          <el-select
            placeholder="请选择尾矿库"
            style="width: 100%"
            v-model="addForm.tailingPondId"
          >
            <el-option
              v-for="item in opationss"
              :key="item.id"
              :label="item.tailingName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型" prop="dataType">
          <el-select
            placeholder="请选择数据类型"
            v-model="addForm.dataType"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="X坐标平移量" prop="offsetX">
          <el-input
            v-model="addForm.offsetX"
            placeholder="请输入X坐标平移量"
          ></el-input>
        </el-form-item>
        <el-form-item label="Y坐标平移量" prop="offsetY">
          <el-input
            v-model="addForm.offsetY"
            placeholder="请输入Y坐标平移量"
          ></el-input>
        </el-form-item>
        <el-form-item label="Z坐标平移量" prop="offsetZ">
          <el-input
            v-model="addForm.offsetZ"
            placeholder="请输入Z坐标平移量"
          ></el-input>
        </el-form-item>
        <el-form-item label="X轴旋转角" prop="rotateX">
          <el-input
            v-model="addForm.rotateX"
            placeholder="请输入X轴旋转角"
          ></el-input>
        </el-form-item>
        <el-form-item label="Y轴旋转角" prop="rotateY">
          <el-input
            v-model="addForm.rotateY"
            placeholder="请输入Y轴旋转角"
          ></el-input>
        </el-form-item>
        <el-form-item label="Z轴旋转角" prop="rotateZ">
          <el-input
            v-model="addForm.rotateZ"
            placeholder="请输入Z轴旋转角"
          ></el-input>
        </el-form-item>
        <el-form-item label="比例因子" prop="scale">
          <el-input
            v-model="addForm.scale"
            placeholder="请输入比例因子"
          ></el-input>
        </el-form-item>
        <el-form-item label="中央子午线经度" prop="midLongitude">
          <el-input
            v-model="addForm.midLongitude"
            placeholder="请输入中央子午线经度"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        style="display: block; text-align: center; margin-top: -30px"
      >
        <el-button type="primary" @click="addubmit()">确 定</el-button>
        <el-button @click="closeisDialogVisible()">取 消</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getTailingPondList,
  getCoordinateListByPage,
  insertCoordinate,
  updateCoordinateParameter,
  deleteCoordinateParameter,
} from "../../../api/zuobiaoxi";
export default {
  name: "CoordinateParameterManagementChild",
  data() {
    return {
      unitId: window.sessionStorage.getItem("unitId"),
      total: null,
      query: {
        page: 1,
        pagesize: 10,
      },
      isdialogVisible: false,
      dialogVisible: false,
      form: {
        dataType: "",
        midLongitude: "",
        offsetX: "",
        offsetY: "",
        offsetZ: "",
        rotateX: "",
        rotateY: "",
        rotateZ: "",
        scale: "",
        tailingPondId: "",
        unitId: window.sessionStorage.getItem("unitId"),
      },
      addForm: {
        id: "",
        dataType: "",
        midLongitude: "",
        offsetX: "",
        offsetY: "",
        offsetZ: "",
        rotateX: "",
        rotateY: "",
        rotateZ: "",
        scale: "",
        tailingPondId: "",
        unitId: window.sessionStorage.getItem("unitId"),
      },
      value1: "",
      value2: "",
      options: [
        {
          value: 0,
          label: "RTK数据",
        },
        {
          value: 1,
          label: "静态数据",
        },
      ],
      //   表格数据
      tableData: [],
      opationss: [],

      rules: {
        dataType: [{ required: true, message: "请输入", trigger: "blur" }],
        midLongitude: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        tailingPondId: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        offsetX: [{ required: true, message: "请输入", trigger: "change" }],
        offsetY: [{ required: true, message: "请输入", trigger: "change" }],
        offsetZ: [{ required: true, message: "请输入", trigger: "change" }],
        rotateX: [{ required: true, message: "请输入", trigger: "change" }],
        rotateY: [{ required: true, message: "请输入", trigger: "change" }],
        rotateZ: [{ required: true, message: "请输入", trigger: "change" }],
        scale: [{ required: true, message: "请输入", trigger: "change" }],
      },
      rulesForm: {
        dataType: [{ required: true, message: "请输入", trigger: "blur" }],
        midLongitude: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        tailingPondId: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        offsetX: [{ required: true, message: "请输入", trigger: "change" }],
        offsetY: [{ required: true, message: "请输入", trigger: "change" }],
        offsetZ: [{ required: true, message: "请输入", trigger: "change" }],
        rotateX: [{ required: true, message: "请输入", trigger: "change" }],
        rotateY: [{ required: true, message: "请输入", trigger: "change" }],
        rotateZ: [{ required: true, message: "请输入", trigger: "change" }],
        scale: [{ required: true, message: "请输入", trigger: "change" }],
      },
    };
  },
  mounted() {
    this.getlist();
    this.userList();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pagesize = val;
      // this.getStaionListPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      // this.getStaionListPage();
    },
    //尾矿库
    async userList() {
      await getTailingPondList({
        unitId: this.unitId,
      }).then((res) => {
        this.opationss = res.parameter;
        console.log(res);
      });
    },
    //表格
    async getlist() {
      await getCoordinateListByPage({
        unitId: this.unitId,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
      }).then((res) => {
        if (res.resultCode == 200) {
          this.total = res.parameter.total;
          this.tableData = res.parameter.list;
          console.log(this.tableData);
        } else {
          this.tableData = [];
        }
      });
    },

    //新增
    async submit() {
      this.$refs.form.validate(async (val) => {
        if (val) {
          await insertCoordinate({
            dataType: this.form.dataType,
            midLongitude: this.form.midLongitude,
            offsetX: this.form.offsetX,
            offsetY: this.form.offsetY,
            offsetZ: this.form.offsetZ,
            rotateX: this.form.rotateX,
            rotateY: this.form.rotateY,
            rotateZ: this.form.rotateZ,
            scale: this.form.scale,
            tailingPondId: this.form.tailingPondId,
            unitId: this.form.unitId,
          }).then((res) => {
            if (res.resultCode == 200) {
              this.$message({
                message: "新增成功",
                type: "success",
                offset: 450,
                duration: 1000,
              });
              this.getlist();
            } else {
              this.$message({
                message: "新增失败",
                type: "error",
                offset: 450,
                duration: 1000,
              });
            }
          });
          this.dialogVisible = false;
          this.$refs.form.resetFields();
        } else {
          this.$message({
            message: "请完善表单信息",
            type: "error",
            offset: 450,
            duration: 1000,
          });
        }
      });
    },
    //添加取消
    closeDialogVisible() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    //修改取消
    closeisDialogVisible() {
      this.isdialogVisible = false;
      this.$refs.addForm.resetFields();
    },
    //修改
    handleEdit(row) {
      this.addForm.id = row.id;
      this.addForm.dataType = row.dataType;
      this.addForm.midLongitude = row.midLongitude;
      this.addForm.offsetX = row.offsetX;
      this.addForm.offsetY = row.offsetY;
      this.addForm.offsetZ = row.offsetZ;
      this.addForm.rotateX = row.rotateX;
      this.addForm.rotateY = row.rotateY;
      this.addForm.rotateZ = row.rotateZ;
      this.addForm.scale = row.scale;
      this.addForm.tailingPondId = row.tailingPondId;
    },
    //新增(修改)
    async addubmit() {
      this.$refs.addForm.validate(async (val) => {
        if (val) {
          await updateCoordinateParameter({
            dataType: this.addForm.dataType,
            midLongitude: this.addForm.midLongitude,
            offsetX: this.addForm.offsetX,
            offsetY: this.addForm.offsetY,
            offsetZ: this.addForm.offsetZ,
            rotateX: this.addForm.rotateX,
            rotateY: this.addForm.rotateY,
            rotateZ: this.addForm.rotateZ,
            scale: this.addForm.scale,
            tailingPondId: this.addForm.tailingPondId,
            unitId: this.addForm.unitId,
            id: this.addForm.id,
          }).then((res) => {
            if (res.resultCode == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
                offset: 450,
              });
              this.getlist();
            } else {
              this.$message({
                message: "修改失败",
                type: "error",
                offset: 450,
              });
            }
          });
          this.isdialogVisible = false;
        } else {
          this.$message({
            message: "请完善表单信息",
            type: "error",
            offset: 450,
          });
        }
      });
    },
    //删除
    async delet(row) {
      const confirmResult = await this.$confirm(
        "此操作将强制永久删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message({
          message: "已取消删除",
          type: "info",
          offset: 450,
        });
      }
      await deleteCoordinateParameter({
        referenceId: row.id,
      }).then((res) => {
        if (res.resultCode == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            offset: 450,
          });
          this.getlist();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
            offset: 450,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  overflow: auto;
}

.bg-purple {
  background: #d3dce6;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  padding-left: 10px;
}
.el-button {
  font-size: 14px;
  margin-bottom: 8px;
}
.el-table {
  display: block;
  height: 67.2vh;
  overflow-y: auto;
  margin-bottom: 15px;
}
.el-table::before {
  z-index: inherit;
}
</style>
